/**
 * 跨组件通信 
 * 技术方案：
 * 1.导入createContext方法并执行
 * 2.使用Provider包裹根组件
 * 3.需要用到数据的组件使用Consumer包裹获取数据
 * 
 * 注意事项：
 * 1.上层组件和下层组件都是相对的 只要存在就可以使用 通常我们都会通过app作为数据提供方
 * 2.这里涉及的语法都是固定的，有两处 提供的位置 value提供数据 获取位置{value=>使用value做什么都可以}
 * 
 */

import React, { createContext } from "react"
const { Provider, Consumer } = createContext()
function ComA () {
  return (
    <div>
      this is component A
      <ComC></ComC>
    </div>
  )
}
function ComC () {
  return (
    <div>
      this is component C
      {/* 3.需要用到数据的组件使用Consumer包裹获取数据 */}
      <Consumer>
        {value => <span>{value}</span>}
      </Consumer>
    </div>
  )
}

class App extends React.Component {
  state = {
    message: 'this is a message'
  }
  render () {
    return (
      // 2.使用Provider包裹根组件
      <Provider value={this.state.message}>
        <>
          <ComA></ComA>
        </>
      </Provider>


    )
  }
}
export default App
